import React from 'react'
import Modal from '../ui-components/modal'
import style from './style'
import Code from './Code'
import Link from '../ui-components/link'
import styleModal from './style.modal'
import cx from 'classnames'
import Button from '../ui-components/button'

export default 
class Test extends React.Component {

	state = {
		one: false,
    two: false
	}

	show(name) {
    return () => {
      this.setState({
        [name]: true
      })
    }
	}

	handleClick() {
		this.setState({
      one: false,
      two: false
		})
	}

	render() {
		return (
			<div className={style.root}>
				<Code>{'<Modal active={..} onRequestClose={..}>{..}</Modal>'}</Code>
				<div>
					<Link onClick={::this.show('one')} label="两栏Dialog"/>
				</div>
				<div>
					<Link onClick={::this.show('two')} label="Dialog"/>
				</div>
				<div>
          <Modal 
            close
            twoColumn
            actions={[
              {
                handler: () => {},
                label: '确定'
              }
            ]}
            onRequestClose={::this.handleClick}
            active={this.state.one}>
            <div>
              <div>
                <div data-role="dialog-title">单选</div>
                <p>hello</p>
              </div>
              <div>
                <div data-role="dialog-preview-bg"></div>
                <div data-role="dialog-title">单选</div>
                <p>hhi</p>
              </div>
            </div>
          </Modal>
				</div>
				<div>
          <Modal 
            close
            actions={[
              {
                handler: () => {},
                label: '确定'
              },
              {
                handler: () => {},
                label: '取消',
                white: true
              }
            ]}
            onRequestClose={::this.handleClick}
            active={this.state.two}>
            <div>
              <div data-role="dialog-title">删除档案模板</div>
              <p>hello ~~~</p>
            </div>
          </Modal>
				</div>
			</div>
		)
	}
}
